<template>
  <input type="text" v-model="firstName" /> +
  <input type="text" v-model="lastName" /> =
  <input type="text" v-model="fullName" />
</template>

<script>
import { ref, computed } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    let firstName = ref("张");
    let lastName = ref("三");

    // 计算属性计算出最终名字
    // let fullName = computed(() => {
    //   // 这样写虽然最终能得到fullname 但是修改fullname 其他值不会跟着改变
    //   // 因为修改是set属性 来控制的

    //   return firstName.value + "-" + lastName.value;
    // });

    let fullName = computed({
      get() {
        return firstName.value + "-" + lastName.value;
      },
      set(value) {
        const arr = value.split("-");
        lastName.value = arr[1];
        firstName.value = arr[0];
      },
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};
</script>

<style>
</style>